<template>
	<view>
		<cu-custom/>
		<view class="image-content d-flex flex-row pt-2 pb-2 bgcolor a-center j-center">
			<view class="shop-title mr-5">{{classList.title}}</view>
			<image :src="classList.icon" style="width: 232rpx; height: 252rpx;" mode=""></image>
		</view>
		<view class="mune-box">
			<view class="menu-item mb-3" v-for="(item,index) in classList.list" :key="index">
				<view class="item pl-2 pr-2 span-20 d-flex flex-row j-sb a-center" @click="navigatorTo(item.path)">
					<image :src="item.icon" style="width: 54rpx; height: 54rpx;" mode=""></image>
					<view class="d-flex flex-1 flex-row a-center j-sb ml-1" style="height: 100%;">
						<text class="font-md">{{item.title}}</text>
						<view class="iconfont icon-youjiantou"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cuCustom from '@/components/common/custom.vue'
	export default {
		components:{cuCustom},
		props:{
			classList:Object
		},
		data() {
			return {
				
			};
		},
		methods:{
			navigatorTo(path){
				uni.navigateTo({
					url:path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.bgcolor {
		background: linear-gradient(0deg, rgba(235, 236, 237, .3), #F4E3E2);
	}
.shop-title{
	width: 227rpx;
	height: 70rpx;
	font-weight: bold;
	font-size: 56rpx;
	color: #3B3655;
	line-height: 70rpx;
	background: linear-gradient(91deg, #B92521 26.7333984375%, #FD6801 94.7509765625%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.mune-box{
	width: 100%;
	height: auto;
	padding: 0 46rpx;
	box-sizing: border-box;
	.menu-item{
		width: 100%;
		box-sizing: border-box;
		height: 100upx;
		.item{
			height: 109rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
	}
}
</style>